// import React from "react";
import styles from '@/assets/css/hotel-info.module.css';
// import { MultiMarker, TMap } from '@map-component/react-tmap';
import Slider from "react-slick";
// import { Image } from 'vant'; 
import { Link } from 'react-router-dom'; // 从 react-router-dom 导入 Link
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

const About = () => {
    const settings = {
        dots: true,
        autoplay: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1
    };

    // 样式
    // const style = {
    //     multiMarkerStyle1: {
    //         width: 20,
    //         height: 30,
    //     }
    // };

    return (
        <>
            <div className={styles.heaerd}>
                <Slider {...settings}>
                    <div>
                        <Link to="/coupon/info"> {/* 使用 react-router-dom 的 Link */}
                            <img src={require('@/assets/images/hotel1.jpg')} height={213} style={{ objectFit: "cover" }} alt="Hotel 1" />
                        </Link>
                    </div>
                    <div>
                        <Link to="/coupon/info">
                            <img src={require('@/assets/images/hotel3.jpg')} height={213} style={{ objectFit: "cover" }} alt="Hotel 3" />
                        </Link>
                    </div>
                </Slider>
            </div>
            <div className={styles.hotelinfo}>
                <div className={styles.hotelinfo_title}>
                    创想第一门店
                </div>
                <div className={styles.hotelinfo_address}>
                    广东省深圳市福田区华强北街道振兴路341号上步工业区
                </div>
                <div className={styles.hotelinfo_desc}>
                    <div className={styles.desc_title}>简介</div>
                    <div>这里是极速创想第一门店</div>
                </div>
                <div className={styles.hotelinfo_desc}>
                    <div className={styles.desc_title}>详情</div>
                    <div>这里是极速创想第一门店，欢迎你的预订入住</div>
                </div>
                {/* <div className={styles.map}>
                    <TMap
                        apiKey="Y7RBZ-7FGCW-ZPSRT-YXWHH-VRRNE-FZFZL"
                        center={{ lat: 39.98210863924864, lng: 116.31310899739151 }} // 添加此属性
                    >
                        <MultiMarker
                            geometries={[
                                {
                                    id: '1',
                                    styleId: 'multiMarkerStyle1',
                                    position: { lat: 39.98210863924864, lng: 116.31310899739151 }
                                }
                            ]}
                            styles={style}
                            options={
                                {
                                    // minZoom:1,
                                    // maxZoom:17.2
                                }
                            }
                        />
                    </TMap>
                </div> */}
            </div>
        </>
    )
}

export default About;